import React, { useState, memo } from "react";
import styles from './SpecialCard.module.scss'
import { CountPropstName, PlatCNTypes, PlatENTypes } from "@/components/common/constant";

export type itemDataVo = {
    activityCount: number | null;
    channelName: string | null;
    distributionCount: number | null;
    goodsCount?: number | null;
    lineCount: number | null;
    onlineCount: number | null;
    payCount: number | null;
    sales: number | null;
    salesStr: string | null;
    platformOrigin?: number | null,
}

interface SpecialCardProps {
    itemData: itemDataVo,
    noPlatform?: boolean, 
}

const SpecialCard: React.FC<SpecialCardProps> = (props) => {
    const { itemData, noPlatform } = props;

    // 过滤 特定值和 null 值
    const filteredObj = Object.fromEntries(
        Object.entries(itemData).filter(([key, value]) =>
            !['channelName', 'sales', 'onlineCount', 'platformOrigin', 'shopName'].includes(key) && value !== null
        )
    );

    const platformKey = PlatENTypes[itemData.platformOrigin ?? 1]
    let imagePath = require(`@/assets/image/${platformKey}-logo.png`)

    const CardHead: React.FC<any> = memo((props) => {
      return (
        <div className={styles['card-head']}>
            <img className={styles['card-logo']} src={imagePath} alt="" />
            <section className={styles['card-title']}>{itemData.channelName}</section>
        </div> 
      )
    })

    return (
        <div className={styles['card-warp']}>
            { noPlatform ? '' : <CardHead /> }
            <ul className={styles['card-content']}>
                {Object.keys(filteredObj) && Object.keys(filteredObj).length && Object.keys(filteredObj).map((item, index) => {
                    return (
                        <li key={index} className={`${styles['card-item']} ${styles[(Object.keys(filteredObj).length === 2 || Object.keys(filteredObj).length === 4) ? 'card-item-half-len' : 'card-item-one-third-len']}`}>
                            <section className={styles['card-item-title']}>{CountPropstName[item as keyof typeof CountPropstName]}</section>
                            <section className={styles['card-item-data']}>{itemData[item as keyof itemDataVo]}</section>
                        </li>
                    )
                })
                }
                {Object.keys(filteredObj) && Object.keys(filteredObj).length === 2 ? <div className={styles["card-divider"]}></div> : ''}
            </ul>
        </div>
    )
}

export default SpecialCard